<template>
    <div id="map">
    </div>
</template>

<script setup>
    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/WebGLTile';
    import View from 'ol/View';
    import {OSM} from 'ol/source';
    import {onMounted} from 'vue'
    import { XYZ } from "ol/source";
    onMounted(() => {
      new Map({
        target:'map',
        layers: [
          new TileLayer({
            source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
            }),
          ],
        //配置视图
        view: new View({
          center: [0, 0],
          zoom: 0,
        }),
      })
    })

</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>